import React, { Component, PureComponent } from 'react'
import "./index.css"

export default class Parent extends PureComponent {
  state = {carName: "奔驰c36", stus:['小张', '小李', '小王']}

  addStu = () => {
    const {stus} = this.state

    // 报错
    /* stus.uhshift("小刘")
    this.setState({stus}) */

    this.setState({stus: ['小刘', ...stus]})
  }

  changeCar = () => {
    // this.setState({carName: '迈巴赫'})
    // this.setState({})

    const obj = this.state
    obj.carName = "迈巴赫"
    console.log(obj === this.state) // 底层浅复制，进行判断是否跟原来的对象一致， 一致则不更新
    this.setState(obj)
  }

  /* shouldComponentUpdate(nextProps, nextState) {
    console.log(this.props, this.state)
    console.log(nextProps, nextState)
    return this.state.carName !== nextState.carName
  } */

  render() {
    console.log("Parent---render");
    const {carName, stus} = this.state

    return (
      <div className='parent'>
        <h3>我是Parent组件</h3>
        <span>{stus}</span>
        <br/>
        <span>我的车名字是：{carName}</span>
        <button onClick={this.changeCar}>点我换车</button>
        <button onClick={this.addStu}>点我加名字</button>
        {/* <Child carName={carName}></Child> */}
        <Child carName="奥拓"></Child>
      </div>
    )
  }
}

class Child extends PureComponent {
  /* shouldComponentUpdate(nextProps, nextState) {
    console.log(this.props, this.state)
    console.log(nextProps, nextState)
    return this.props.carName !== nextProps.carName
  } */

  render() {
    console.log("Child---render");
    const {carName} = this.props

    return (
      <div className='child'>
        <h3>我是Child组件</h3>
        <span>我接到的车是：{carName}</span>
      </div>
    )
  }
}